<template>
  <el-row type="flex">
    <div class="series-table-wrap">
      <SkusTable
        :maxTableHeight="200"
        :columns="TableInfo.columns"
        :dataSource="TableInfo.list"
      />
    </div>
    <div v-if="canAdd" class="series-add-btn">
      <el-button size="mini" icon="el-icon-plus" @click="handleAddSeries">新增系列</el-button>
    </div>
  </el-row>
</template>
<script>
import SkusTable from '@/components/skusTable';
import { TableInfo } from '@/utils/getUtils';
export default {
  components: { SkusTable },
  props: {
    dataSource: {
      type: Array,
      default: () => []
    },
    tableColumns: {
      type: Array,
      default: () => []
    },
    canAdd: {
      type: Boolean,
      default: true
    }
  },
  data () {
    return {
      TableInfo: new TableInfo({ columns: this.getTableColumns() }),
      seriesList: [],
      SERIES_STATE: {
        Enable: '1', // 启用
        Disable: '2', // 禁用
      },
    }
  },
  watch: {
    dataSource: {
      handler (list) {
        const hasSeriesList = list.length > 0 // 集合不为空时，为编辑页面操作，否则认为是新增
        hasSeriesList ? this.TableInfo.setList(list) : this.initSeriesListByAdd()
      },
      immediate: true
    }
  },
  methods: {
    // 获取表列
    getTableColumns () {
      if (this.tableColumns.length > 0) return this.tableColumns
      const cannotEdit = row => row.canEdit == '2' // 能否编辑 1-可以编辑，2-不可编辑
      const columns = [
        { title: '系列ID', key: 'seriesUuid' },
        { title: '系列名称', render: (h, { row }) => <el-input v-model={row.series} disabled={cannotEdit(row)} /> },
        {
          title: '是否启用',
          render: (h, { row }) => (<div class="series-state-wrap">
            <el-radio-group v-model={row.seriesState}>
              <el-radio label={this.SERIES_STATE.Enable} disabled={cannotEdit(row)}>启用</el-radio>
              <el-radio label={this.SERIES_STATE.Disable} disabled={cannotEdit(row)}>禁用</el-radio>
            </el-radio-group>
          </div>)
        },
        {
          title: '操作',
          render: (h, { row, index }) => {
            if (row.seriesUuid || cannotEdit(row)) return <span></span>
            return <el-button type="text" size="mini" onClick={() => { this.TableInfo.removeList(index) }}>删除</el-button>
          }
        }
      ]
      return columns
    },
    // 初始新增页面系列集合
    initSeriesListByAdd () {
      this.TableInfo.setList([this.getAddSeriesInfo({ series: '无系列', canEdit: '2' })])
    },
    // 获取新增系列对象信息
    getAddSeriesInfo (extraInfo) {
      const seriesInfo = { series: '', seriesUuid: '', seriesState: this.SERIES_STATE.Enable, ...extraInfo }
      return seriesInfo
    },
    // 新增系列
    handleAddSeries () {
      this.TableInfo.setList([...this.TableInfo.list, this.getAddSeriesInfo()])
    },
    // 获取系列结果
    getSeriesList () {
      const resultList = this.TableInfo.list.map(item => _.pick(item, ['series', 'seriesUuid', 'seriesState']))
      return resultList
    }
  }
}
</script>
<style lang="less" scoped>
.series-table-wrap {
  margin-right: 20px;
}
.series-add-btn {
  margin-top: 3.5px;
}
</style>
